@import url('~assets/less/index.less');

.app_down {
  height: 50px;
  background: #0a0a0a;
  line-height: 50px;
  color: #fff;
  padding: 0 10px;
  font-size: 11px;
}

.app_down_btn {
  float: right;
  background: #af0000;
  height: 40px;
  line-height: 40px;
  margin-top: 5px;
  padding: 0 0.3rem;
  border-radius: 0.2rem;
}

.daytime {
  background: #fff !important;
  color: black;
}

.darknight {
  background: #191b27 !important;
  color: @white;
}

.dark_li_color {
  background: #121212 !important;
  color: @white;
}

.van-button--default {
  border: none !important;
}

.white {
  color: #fff !important;
}

.home_mod {
  .home_mod_box {
    &_desc {
      .swiper {
        margin: 0 9px;
        height: 150px;

        .my-swipe .van-swipe-item {
          color: #fff;
          font-size: 20px;
          line-height: 150px;
          text-align: center;
        }

        .my-swipe {
          height: 100%;
          border-radius: 8px;

          /deep/.van-swipe__track {
            border-radius: 8px;

            .van-swipe-item {
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        /deep/ .van-swipe__indicators {
          // bottom: -10px;
          .van-swipe__indicator {
            background-color: #daab51 !important;
          }
        }
      }

      .notice {
        display: flex;
        align-items: center;
        margin: 0 9px;

        img {
          width: 16px;
          height: 16px;
        }

        .van-notice-bar {
          width: 100%;
          background-color: @white;
          color: #1a1a1a;
          font-family: @font-family-Regular;
          font-size: 12px;
          padding-left: 5px;
          padding-right: 0px;
        }
      }

      .van-divider {
        margin: 0;
      }

      .odds {
        display: flex;
        padding: 13px 0;
        overflow: scroll;

        .usdt {
          min-width: 125px;
          font-weight: bold;
          font-family: Roboto-Bold;
          flex: 1;

          p {
            text-align: center;
          }

          .usdt-type {
            font-size: 14px;
          }

          .usdt-money {
            font-size: 17px;
            margin: 5px 0px;
            color: #ee3e57;
          }

          .usdt-percentage {
            color: #ee3e57;
          }
        }
      }
    }

    &_line {
      width: 100%;
      height: 8px;
      background: #f3f3f3;
    }

    .help1 {
      display: flex;
      align-items: center;
      height: 66px;

      &>div {
        flex: 1;
        text-align: center;
        display: table-cell;
        font-family: Roboto-Regular, Roboto;

        p {
          color: #1a1a1a;
        }

        &>img {
          width: 32px;
          height: 32px;
          margin-bottom: 6px;
        }
      }
    }

    &_content {
      .help {
        display: flex;
        align-items: center;
        height: 88px;

        &>div {
          flex: 1;
          text-align: center;
          display: table-cell;
          font-family: Roboto-Regular, Roboto;

          p {
            color: #1a1a1a;
          }

          &>img {
            width: 32px;
            height: 32px;
            margin-bottom: 6px;
          }
        }
      }

      .transaction {
        display: flex;
        height: 72px;
        padding: 0 11px;
        margin-bottom: 12px;

        &>div {
          position: relative;
          flex: 1;
          padding: 15px 12px;
          border-radius: 4px;
          overflow: hidden;

          p {
            font-size: 14px;
            color: #1a1a1a;
            margin-bottom: 8px;
            font-weight: bold;
            font-family: Roboto-Regular;
          }

          span {
            padding: 3px 4px;
            border-radius: 4px;
            text-align: center;
            transform: scale(0.83);
            color: white;
          }

          img {
            position: absolute;
            bottom: -8px;
            right: 12px;
            width: 44px;
            height: 38px;
          }

          &:first-child {
            background-color: #ffefd5;
            margin-right: 11px;

            span {
              background-color: #ffbe1b;
            }
          }

          &:nth-child(2) {
            background-color: #dafcee;

            span {
              background-color: #08cc89;
            }
          }
        }
      }

      .purchase {
        position: relative;
        margin: 0 12px;
        height: 80px;
        margin-bottom: 12px;
        box-shadow: 0px 0px 40px 1px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        overflow: hidden;

        img {
          position: absolute;
          top: -40px;
          left: -34px;
          width: 424px;
        }

        span {
          position: absolute;
          right: 21px;
          top: 29px;
          font-size: 18px;
          font-family: Roboto-SemiBold, Roboto;
          font-weight: 600;
          color: #daab51;
        }
      }

      .spare_money {
        position: relative;
        margin: 0 12px;
        height: 80px;
        box-shadow: 0px 0px 40px 1px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        margin-bottom: 12px;
        overflow: hidden;

        img {
          position: absolute;
          top: -40px;
          left: -39px;
          width: 430px;
        }

        &>div {
          position: absolute;
          left: 21px;
          top: 10px;
          width: 221px;
          text-align: center;
        }

        span {
          font-size: 16px;
          font-family: Roboto-SemiBold, Roboto;
          font-weight: 600;
          color: #f70945;
        }
      }

      /deep/.data-list p {
        text-align: left !important;
      }

      .data {
        .van-tabs {
          /deep/.van-tabs__wrap {
            height: 32px;

            span {
              font-size: 14px;
              font-family: Roboto-Medium, Roboto;
              font-weight: 500;
            }

            .van-tab--active {
              color: #daab51;
            }

            .van-tabs__line {
              background-color: #daab51;
            }
          }
        }

        .list-title {
          display: flex;
          align-items: center;
          height: 24px;
          margin: 5px 20px;

          span {
            flex: 1;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            display: block;
            float: left;
            color: #abacb7;

            &:nth-child(1) {
              width: 33.33%;
              text-align: left;
            }

            &:nth-child(2) {
              width: 33.33%;
              text-align: center;
            }

            &:nth-child(3) {
              width: 33.33%;
              text-align: right;
            }
          }
        }

        .list_data {
          .data-list {
            display: block;
            align-items: center;
            height: 56px;
            padding: 0 12px;

            p:nth-child(1) {
              width: 35%;
              padding-top: 20px;
            }

            p:nth-child(2) {
              width: 35%;
              padding-top: 20px;
            }

            .new_list_div {
              padding-top: 10px;
            }

            p {
              float: left;
              flex: 1;

              span {
                font-family: Roboto-Regular, Roboto;

                &:first-child {
                  font-size: 14px;
                  font-weight: bold;
                  color: #1a1a1a;
                }

                &:nth-child(2) {
                  font-family: Roboto-Regular, Roboto;
                  color: #abacb7;
                }
              }

              &:nth-child(2) {
                text-align: center;
                font-size: 14px;
                font-family: Roboto-Bold, Roboto;
                font-weight: bold;
                color: #1a1a1a;
              }
            }

            &>div {
              flex: 1;
              text-align: right;

              .van-button--normal {
                padding: 0 5px;
              }

              .van-button {
                width: 88px;
                border-radius: 4px;

                span {
                  display: block;
                  word-break: break-all;
                  font-family: Roboto-Medium, Roboto;
                  font-weight: 500;
                  color: #ffffff;
                }
              }
            }
          }

          .van-divider {
            margin: 0;
          }
        }
      }
    }
  }
}